import type { FC } from 'react';
import { StyleSheet, View } from 'react-native';
import FilterTabs from '@/components/FilterTabs';
import Notification from '@/pages/notification';
import Message from '@/pages/message';

const styles = StyleSheet.create({
  page: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

const tabs = [
  {
    title: 'Message',
    value: 'message'
  },
  {
    title: 'Notification',
    value: 'notify'
  }
];

const Notifications: FC = () => {
  return (
    <View style={styles.page}>
      <FilterTabs
        search={false}
        filters={tabs}
      >
        {tab => {
          switch (tab.value) {
            case 'notify': {
              return <Notification />;
            }
            case 'message': {
              return <Message />;
            }
          }
        }}
      </FilterTabs>
    </View>
  );
}

export default Notifications;